<template>
    <div class="map-wrapper">
        <div id="map-container"></div>
        <van-floating-panel :content-draggable="false" :height="height" :anchors="anchors">
            <div style="text-align: center; padding: 15px">
                <div class="controls-card">
                    <van-form>
                        <van-cell-group inset style="border-radius: 12px;">
                            <!-- 修改背景色为灰色 -->
                            <van-field v-model="startPoint" left-icon="location-o" placeholder="请输入行程起点" size="large"
                                @focus="activePanel"
                                style="background-color: #f8f9fa; border-radius: 12px; margin: 8px 0;" />
                            <van-field v-model="endPoint" left-icon="flag-o" placeholder="请输入行程终点" size="large"
                                style="background-color: #f8f9fa; border-radius: 12px; margin: 8px 0;" />
                        </van-cell-group>
                    </van-form>
                    <van-button color="var(--gradient-primary)"
                        style="border-radius: 25px; " @click="onSubmit">
                        发起行程
                    </van-button>
                </div>
            </div>
        </van-floating-panel>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { showDialog } from 'vant'; // 引入showDialog替代showConfirmDialog
import { useRouter } from 'vue-router'; 
// 地图相关变量
let map = null;
const router = useRouter(); 
// 状态变量
const startPoint = ref('');
const endPoint = ref('');
const anchors = [
    100,
    Math.round(0.35 * window.innerHeight),
    Math.round(0.7 * window.innerHeight),
];
const height = ref(anchors[1])

const activePanel = () => {
    height.value = anchors[2]
}
// 初始化地图
const initMap = () => {
    map = new TMap.Map(document.getElementById('map-container'), {
        center: new TMap.LatLng(29.912221, 121.624656),
        zoom: 17,
        pitch: 0,
        rotation: 0
    });
};

// 显示自定义提示弹窗（仅确认按钮）
const showTipDialog = (message, title = '提示') => {
    return showDialog({
        title,
        message,
        confirmButtonText: '确认',
        showCancelButton: false // 隐藏取消按钮
    });
};

//发起行程
const onSubmit = () => {
    if (!startPoint.value.trim()) {
        showTipDialog('请输入起点');
        return;
    }

    if (!endPoint.value.trim()) {
        showTipDialog('请输入终点');
        return;
    }
    console.log('表单提交，起点:', startPoint.value, '终点:', endPoint.value);
    router.push({ 
        path: '/new-order', 
        query: { 
            startPoint: startPoint.value, 
            endPoint: endPoint.value 
        } 
    });
};

// 加载地图脚本
onMounted(() => {
    const script = document.createElement('script');
    script.src = `https://map.qq.com/api/gljs?v=1.exp&key=AYEBZ-BP7LQ-4J55Z-4ENT7-XJIS3-2IBX4`;
    script.onload = initMap;
    document.head.appendChild(script);
    height.value = anchors[1]
});
</script>

<style lang="scss" scoped>
/* 样式与原代码完全一致，未做修改 */
.mr-2 {
    margin-right: 8px;
}

.map-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #f5f7fa;
}

#map-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100vh - 60px);
    z-index: 1;
}

.FloatingPanel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.controls-card {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>